<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h1 v-text="title"></h1>
        <input type="text" v-model="val" @keyup.enter="add">
        <br>
        <br>
        <input type="checkbox" @change="changeAllCheck" v-model="allCheck">全选
        <ul>
            <li v-for="(item, i) in list" :key="item.title">
                <input type="checkbox" v-model="item.check" @change="changeCheck(i, $event)">
                <span v-text="item.title"></span>
                <button @click="del(i)">x</button>
            </li>
        </ul>
    </div>
</body>
<script src="../libs/vue.min.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data(){
            return {
                title: "待办事项",
                val: "",
                list:[{
                    title:"今天要学习vue的组件",
                    check: false
                }],
                allCheck: false
            }
        },
        methods: {
            add(){
                this.list.push({
                    title: this.val,
                    check: false
                })
                this.val = "";
            },
            del(i){
                this.list.splice(i, 1);
            },
            changeCheck(i){
                // 单个选中影响全选
                this.allCheck = this.list.every(val=>val.check);
            },
            changeAllCheck(){
                // 全选影响单个选中
                this.list.forEach(val=>{
                    val.check = this.allCheck
                })
            }
        }
    })
</script>
</html>